import React, { Component } from 'react';
import { connect } from 'dva';
import { Input, Form } from 'antd';
import { FormComponentProps } from 'antd/lib/form/Form';

interface Props extends FormComponentProps {
	data?: {
		id: number;
	};
	title?: string;
	require?: boolean;
	type?: string;
	form;
	validator?: Function;
	typeMessage?: string;
	inputType?: string;
	disabled?: boolean;
	placeholder?: string;
	addonAfter?: string;
	isNumber?: boolean
}

@connect()
class OneItem extends Component<Props, any> {
	render() {
		const {
			form,
			title,
			type,
			require,
			validator,
			inputType,
			typeMessage,
			disabled,
			placeholder,
			addonAfter,
			isNumber,
		} = this.props;
		const { getFieldDecorator } = form;
		const formItemLayout = {
			labelCol: {
				xs: { span: 12 },
				sm: { span: 6 }
			},
			wrapperCol: {
				xs: { span: 6 },
				sm: { span: 14 }
			}
		};

		return (
			<Form.Item {...formItemLayout} label={title}>
				{getFieldDecorator(type, {
					rules: [
						{
							required: require,
							message: title
						},
						{
							validator: validator
						},
						{
							type: inputType,
							message: typeMessage
						}
					]
				})(<Input type={ isNumber === false ? 'string' : 'number'} placeholder={placeholder || title} disabled={disabled} addonAfter={addonAfter} />)}
			</Form.Item>
		);
	}
}

export default OneItem;
